<template>
	<view class="content">
		<!-- 菜单 -->
		<view class="menu-data unify-flex unify-padding unify-background-color unify-ceiling">
			<view class="menu-data-item unify-relative" :style="{'color': tabIndex === item.id? '#333333': ''}" v-for="(item,index) in orderMenu" :key="index" @tap="tapMenu(item.id)">
				{{item.name}}
				<view class="menu-surbase unify-absolute" :class="'bg-' + themeColor.name" :style="{'width': item.name.length * 23 + 'rpx'}" v-if="tabIndex === item.id"></view>
			</view>
		</view>
		
		<!-- 列表 -->
		<swiper class="swiper-list" :style="{'height': windowHeight - 48 + 'px'}" :interval="2000" :duration="500" :current="tabIndex" @change="change">
			<swiper-item v-for="i in 6" :key="i">
				<scroll-view scroll-y="true" :style="{'height': windowHeight - 48 + 'px'}">
					<view class="swiper-item unify-padding unify-background-color" v-for="(item, index) in list" :key="index" @tap="tapSkip(item)">
						<!-- 头部 -->
						<uni-user-order-top :storeName="item.storeName" :status="item.status"></uni-user-order-top>
						
						<view style="margin-top: 8rpx;" v-for="(item2, index2) in item.orderDetails" :key="index2">
							<!-- 信息 -->
							<uni-user-order-list :orderDetails="item2"></uni-user-order-list>
						</view>
					
						<!-- 底部 -->
						<uni-user-order-btn @tap="toSetStatus(item,item.status,item.id,item.amount)" :status="item.status"></uni-user-order-btn>
					</view>
					
					<!-- 加载更多 -->
					<uni-loading-more></uni-loading-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderMenu: this.$mConstDataConfig.userOperationMenu[0].orderMenu,
				tabIndex: 0,
				list: [],
				windowHeight: 0
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight;
				}
			});
		},
		onLoad(){
			const params={
				page:1,
				pageSize:10
			}
			this.getAllOrders(params)
		},
		methods: {
			// 重新加载页面的函数
			reloadPage() {
			  // 获取当前页面的路径
			  let currentPage = getCurrentPages().pop();
			  let url = currentPage.route;
			  console.log("当前页面路径"+url)
			 
			  // 使用redirectTo重新加载页面
			  uni.redirectTo({
			    url: `/${url}` // 注意这里的url需要是从当前页面获取的完整路径
			  });
			}
			,
			//获取所有的订单信息
			getAllOrders(params){
				
				this.$https({
					url:"/order/userPage",
					methods:"get",
					data:params,
					success:(res)=>{
						this.list=res.data.records
						// console.log(this.list)
					}
				})
			},
			
			// 菜单切换
			tapMenu(e) {
				this.tabIndex = e;
				uni.setNavigationBarTitle({
					title: this.orderMenu[e].name
				})
				let params={
					page:1,
					pageSize:10,
					status:e
				}
				this.getAllOrders(params)
			},
			
			// 滑动处理
			change(e) {
				this.tabIndex = e.detail.current;
			}
			,toSetStatus(item,status,id,amount){
				console.log(status)
				switch(status){
					case 1:
						uni.navigateTo({
							url:'/pages/orderSuccess/orderSuccess?id='+id+'&amount='+amount
						})
						break
					case 3:
						console.log(status+"进来了")
						this.$openPage({
							name:"evaluate",
							query: {
								data: item
							}
							
						})
						break
					case 4:
						
					default:
						this.setOrderStatus(id,status)
						this.reloadPage()
					    break
						
				}
				
	
				
			},
			//确认订单收货
			setOrderStatus(orderId,status){
				this.$https({
					url:"/order",
					method:"put",
					data:{
						id:orderId,
						status:status+1
					},success:(res)=>{
						console.log(res.data)
					
					}
				})
			}
			,
			//去到订单详情页
			tapSkip(e) {
				this.$openPage({
					name:'userOrderDetails',
					query: {
						data: e
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	// 菜单
	.menu-data {
		height: 48px;
		align-items: center;
		justify-content: space-between;
		font-size: $uni-font-size-sm;
		
		.menu-data-item {
			flex: 1;
			text-align: center;
			color: $uni-text-color-grey;
			
			.menu-surbase {
				height: 4rpx;
				bottom: -15rpx;
				left: 0;
				right: 0;
				margin: auto;
			}
		}
	}
	
	// 列表
	.swiper-list {
	}
	
	.swiper-item {
		margin-top: 10px;
	}
</style>
